<!DOCTYPE html>
<html>
  <head>
    <style>
      body { font-family: serif; }
      .testCase { border: 1px solid black; padding: 10px; margin: 10px; width: 100%; }
    </style>
    <script>
      function log(text) {
        var log = document.getElementById('log');
        log.appendChild(document.createTextNode(text));
        log.appendChild(document.createElement('br'));
      }

      function dragStartTest(e) {
        log("Test ID: " + e.currentTarget.id);
        log("text/plain: " + e.dataTransfer.getData("text/plain"));
        log("text/url: " + e.dataTransfer.getData("text/url"));
        log("text/html: " + e.dataTransfer.getData("text/html"));
      }

      function dragCenterOfRect(clientRect) {
        var x = clientRect.left + clientRect.width / 2;
        var y = clientRect.top + clientRect.height / 2;

        eventSender.mouseMoveTo(x, y);
        eventSender.mouseDown();
        eventSender.leapForward(200);
        eventSender.mouseMoveTo(x + 100, y + 100);
        eventSender.mouseUp();
      }

      function runTest() {
        if (!window.testRunner)
        return;
        testRunner.dumpAsText();

        var selection = window.getSelection();
        selection.selectAllChildren(document.getElementById('selectionTest'));
        dragCenterOfRect(selection.getRangeAt(0).getBoundingClientRect());
        dragCenterOfRect(document.getElementById('imageTest').getBoundingClientRect());
        dragCenterOfRect(document.getElementById('linkTest').getBoundingClientRect());
      }
    </script>
  </head>
  <body onload="runTest()">
    <p>Simple test that the dragstart event contains the default data in the event.
    <div class="testCase" id="selectionTest" ondragstart="dragStartTest(event)">
      <p>Select some text in this box and drag it.
    </div>
    <div class="testCase">
      <p>Drag the image. <img id="imageTest" src="data:image/png;base64,
      iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwY
      AAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeB
      DhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2w
      FiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRC
      iFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5E
      rkJggg==" ondragstart="dragStartTest(event)">
    </div>
    <div class="testCase">
      <p>Drag the link. <a id="linkTest" href="http://www.example.com/" ondragstart="dragStartTest(event)">Link</a>
    </div>
    <div id="log"></div>
  </html>
